
body {
    font: normal .18rem/1.5 helvetica neue,hiragino sans gb,Microsoft YaHei,arial,tahoma,sans-serif;
    background-color: #fff
}

.Widget.pageload-normal {
    -webkit-transition: all .5s;
    position: fixed;
    background-color: #6b55a2;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0
}

.Widget.pageload-normal.show {
    visibility: visible;
    opacity: 1
}

.Widget.pageload-normal .animabox {
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -.9rem 0 0 -.9rem
}

.Widget.pageload-normal .animabox .anima-a,.Widget.pageload-normal .animabox .anima-b {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2s infinite ease-in-out
}

.Widget.pageload-normal .animabox .anima-b {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.Widget.pageload-process {
    -webkit-transition: all .5s;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: #fff;
    top: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0
}

.Widget.pageload-process.show {
    visibility: visible;
    opacity: 1
}

.Widget.pageload-process .text {
    font-size: .7rem;
    color: #dd4814;
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -.5rem
}

.Widget.dialog {
    -webkit-transition: all .5s;
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    text-align: center;
    z-index: 999;
    background-color: rgba(0,0,0,.5);
    visibility: hidden;
    opacity: 0
}

.Widget.dialog.show {
    visibility: visible;
    opacity: 1
}

@-webkit-keyframes bounce {
    0%,to {
        -webkit-transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1)
    }
}

@keyframes bounce {
    0%,to {
        transform: scale(0);
        -webkit-transform: scale(0)
    }

    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

body,html {
    background: #000;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased
}

.View.section {
    max-width: 7.5rem;
    width: 100%;
    height: 100%
}

.View.section.scroll {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.Page {
    width: 100%;
    height: 100%;
    max-width: 7.5rem;
    position: absolute;
    top: 0;
    -webkit-transition: all .5s;
    opacity: 0;
    visibility: hidden
}

.Page.Jpageshow {
    -webkit-transition: all .5s .3s;
    opacity: 1;
    visibility: visible
}

.Page.Jpagehide {
    opacity: 0;
    visibility: hidden
}

.View.scene {
    height: 100%
}

.View.stage {
    height: 100%;
    position: relative
}

.View.page {
    width: 100%;
    height: 100%
}

.View.index {
    background: url(../images/indexbg.jpg?d449138e) no-repeat;
    background-size: 100% auto
}

.View.index .boatlight {
    -webkit-animation: boatlight 1.4s ease infinite;
    background: url(../images/boatlight.png?488caf5c) no-repeat;
    background-size: 100% auto;
    width: 3rem;
    height: 1rem;
    position: absolute;
    top: 7.1rem;
    left: 0;
    z-index: 22
}

@-webkit-keyframes boatlight {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1
    }

    40% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.View.index .light-right {
    -webkit-transform-origin: 98% top;
    -webkit-animation: lightRight 3.2s ease-in-out infinite;
    background: url(../images/light1.png?d0777638) no-repeat;
    background-size: 100% auto;
    width: 2.6rem;
    height: 5rem;
    position: absolute;
    right: 0;
    top: 0
}

@-webkit-keyframes lightRight {
    0%,to {
        -webkit-transform: rotate(-8deg)
    }

    40% {
        -webkit-transform: rotate(6deg)
    }
}

.View.index .particle-right {
    -webkit-animation: ptRight 3.2s ease-in-out infinite .2s;
    background: url(../images/pt1.png?c16ff542) no-repeat;
    background-size: 100% auto;
    width: 1.76rem;
    height: 2.44rem;
    position: absolute;
    right: 0;
    top: 0
}

@-webkit-keyframes ptRight {
    40% {
        opacity: 0
    }
}

.View.index .heading {
    width: 100%;
    height: 2.7rem;
    position: absolute;
    top: 2.33rem;
    left: 0;
    overflow: hidden
}

.View.index .heading .light {
    -webkit-animation: scan 3.2s ease-in-out infinite;
    background: url(../images/scan.png?33916b26) no-repeat;
    background-size: 100% auto;
    width: 2.2rem;
    height: 2.7rem;
    position: absolute;
    right: -.4rem
}

@-webkit-keyframes scan {
    40% {
        -webkit-transform: translateX(-2rem)
    }
}

.View.index .heading .mask {
    width: 100%;
    height: 100%;
    background: url(../images/mask.png?455fcd2b) no-repeat;
    background-size: 100% auto;
    position: relative
}

.View.index .light-left {
    -webkit-transform-origin: left .3rem;
    -webkit-animation: lightLeft 3s ease-in-out infinite;
    background: url(../images/light0.png?2027e518) no-repeat;
    background-size: 100% auto;
    width: 1.82rem;
    height: 3.96rem;
    position: absolute;
    left: 0;
    top: 3.3rem
}

@-webkit-keyframes lightLeft {
    0%,to {
        -webkit-transform: rotate(12deg)
    }

    40% {
        -webkit-transform: rotate(-2deg)
    }
}

.View.index .particle-left {
    -webkit-animation: ptLeft 3s ease-in-out infinite;
    background: url(../images/pt0.png?439d514f) no-repeat;
    background-size: 100% auto;
    width: 1.14rem;
    height: 2.5rem;
    position: absolute;
    left: 0;
    top: 3.1rem;
    opacity: 0
}

@-webkit-keyframes ptLeft {
    40%,60% {
        opacity: 1
    }
}

.View.index .boatdeck {
    -webkit-animation: deck 2s ease infinite;
    background: url(../images/deck.png?26f17f36) no-repeat;
    background-size: 100% auto;
    width: 7.5rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1
}

@-webkit-keyframes deck {
    20%,50% {
        opacity: 0
    }

    35%,80% {
        opacity: 1
    }
}

.View.index .star1,.View.index .star2 {
    background: url(../images/star1.png?a4198032) no-repeat;
    background-size: 100% auto;
    width: 7.5rem;
    height: 5.28rem;
    top: 1.94rem;
    position: absolute;
    left: 0
}

.View.index .star1 {
    -webkit-animation: star 1.4s infinite
}

.View.index .star2 {
    -webkit-animation: star 1.6s infinite .3s
}

@-webkit-keyframes star {
    10%,45%,90% {
        opacity: 1
    }

    30%,70% {
        opacity: .3
    }
}

.View.index .star2 {
    background: url(../images/star2.png?01a86e9e) no-repeat;
    background-size: 100% auto
}

.View.index .arrowtext {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: .56rem;
    height: .5rem;
    line-height: .5rem;
    font-size: .32rem;
    color: #bbfeff
}

@-webkit-keyframes arrowtext {
    50% {
        color: #fff
    }
}

.View.index .arrowbox {
    -webkit-animation: arrowmove 1s ease-in-out infinite -.1s;
    width: .4rem;
    height: .42rem;
    position: absolute;
    left: 50%;
    margin-left: -.2rem;
    bottom: .38rem
}

@-webkit-keyframes arrowmove {
    50% {
        -webkit-transform: translateY(.05rem)
    }
}

.View.index .arrowbox .arrow {
    -webkit-animation: arrow 1s infinite;
    background: url(../images/arrow.png?66634fa2) no-repeat;
    background-size: 100% auto;
    width: .4rem;
    height: .24rem;
    opacity: .5
}

.View.index .arrowbox .arrow:last-child {
    -webkit-animation: arrow 1s infinite .2s;
    margin-top: -.06rem
}

@-webkit-keyframes arrow {
    0% {
        opacity: .5
    }

    25% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}